$(function () {
    /** 分页组件 **/
    Vue.component('page',{
        props:['all','cur'],
        data:function(){
            return {
                right: 9,
                left: 2
            }
        },
        template: '<div class="ui center pagination menu">' +
                    '<a class="item" v-if="prev"   v-on:click="prevPage"> 上一页 </a>'+
                    '<a class="item" v-for="item in pageAll" v-on:click="btn(item)"  href="#{{cur}}"' +
                    'v-bind:class="{active:cur == item , ellipsis : item == \'...\'}"  track-by="$index">{{item}}</a>'+
                    '<a class="item" v-if="next"   v-on:click="nextPage" > 下一页 </a>' +
                '</div>',
        computed:{
            pageAll: function(){
                var self = this;
                var page = [];
                page.push(1);
                if(self.all > 1 && self.all <= 9) {
                    self.left = 2;
                    while(self.left <= self.all){
                        page.push(self.left);
                        self.left++;
                    }
                }else if(self.all > 9) {
                    self.left = self.cur - 2;     /*左侧初始化*/
                    self.right = self.cur + 2;    /*右侧初始化*/
                    if(self.cur <= 5){           /*左右侧赋值*/
                        self.left = 2;
                        self.right = 7;
                    }else if(self.right >= self.all-1){
                        self.left = self.all - 5;
                        self.right = self.all - 1;
                    }
                    /*左边省略号*/
                    if(self.cur > 5) {
                        page.push("...");
                    }
                    /*循环数组*/
                    while(self.left <= self.right){
                        page.push(self.left);
                        self.left++;
                    }
                    /*右边省略号*/
                    if(self.right < self.all -1) {
                        page.push("...");
                    }
                    page.push(self.all);
                }
                return page;

            },
            prev:function(){
                if(this.cur == 1){
                    return false;
                }else{
                    return true;
                }
            },
            next:function(){
                if(this.cur == this.all){
                    return false;
                }else{
                    return true;
                }
            }
        },
        methods : {
            btn:function(item){
                if(item != "...") {
                    this.cur = item;
                }
            },
            prevPage:function(){
                this.cur--;
                window.location.href = "#"+this.cur;
            },
            nextPage: function() {
                this.cur++;
                window.location.href = "#"+this.cur;
            }
        },
        watch : {
            cur:function(){
                var self = this;
                self.$root.photos = [];
                self.$root.getColumn(this.cur,8,this.$root.total);
            }
        }
    });
    new Vue({
        el: "#right",
        data: {
            params: [],
            cur: '',
            all: '',
            total: '',
            photos: [],
            edit: rootPath + "/module/create#",
            read: rootPath + "/module/img/edit#"
        },
        mounted: function() {
            this.cur = window.location.hash == "" ? 1 : Number(window.location.hash.substr(1));
            this.getColumn(this.cur,8,this.total);
        },
        methods: {
            /** 获取已有栏目 **/
            getColumn: function (cur,size,total) {
                var self = this;
                var data = {
                    pageNum : cur,
                    pageSize : size,
                };
                if(total != '') {
                    data.total = total;
                }
                $.ajax({
                    url: rootPath+"/content/find-model-name" ,
                    type : 'get',
                    data : data,
                    dataType: "json",
                    success: function (result) {
                        if(result.status) {
                            self.params = result.data.items;
                            self.cur = result.data.pageNum;
                            self.all = result.data.pageCount;
                            self.total = result.data.total;
                            for(var key in self.params) {
                                self.getPhotosById(self.params[key].id,key);
                            }
                            delete key;
                        }else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            },
            /** 图片地址转化 **/
            imgUrl: function(url) {
                return url == "" ? "" : rootPath + url;
            },
            /** 获取轮播图片组 **/
            getPhotosById: function(id,count) {
                var self = this;
                $.ajax({
                    url: rootPath + '/module/get-photos-change-by-id',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(result) {
                        if(result.status) {
                            var data = [];
                            if(typeof result.data.photos != "undefined") {
                                for(var key in result.data.photos){
                                    data.push(result.data.photos[key].photoUrl);
                                }
                                delete key;
                            }
                            Vue.set(self.photos,count,data);
                            delete data;
                        } else {
                            header.Popup("error",result.error,"");
                        }
                    }
                });
            }
        }
    });
});
